<template>
	<view class="shopModelEdit">
		<view class="sapam-main-li">
			<view class="sapam-main-li-top">
				<view class="sapam-main-li-top-back">
					<image v-if="attributeLogo" class="sapam-main-li-top-img" :src=attributeLogo mode="">
					</image>
					<image v-else @click="cli_upimg()" class="sapam-main-li-top-img"
						src="https://www.zzzsyh.com/applets/agent/agent/upimg2.png" mode=""></image>
					<image v-if="attributeLogo" @click="cli_closeimg()" class="sapam-img-close"
						src="https://www.zzzsyh.com/applets/agent/agent/close_drop.png" mode=""></image>
				</view>
				<view class="sapam-main-li-top-right">
					<view class="sapam-main-li-top-right-inputBox">
						<input v-model="attributeName" class="sapam-main-li-top-right-input"
							placeholder-class="inputplace" placeholder="请输入规格名称" type="text" value="" />
					</view>
				</view>
			</view>
			<view class="sapam-main-li-cen">
				<view class="sapam-main-li-cen-li">
					<view class="sapam-main-li-cen-li-left">
						<text class="sapam-main-li-cen-li-left-txt">售价</text>
						<text class="sapam-main-li-cen-li-left-txt1">:</text>
						<text class="sapam-main-li-cen-li-left-txt2">￥</text>
					</view>
					<input v-model="attributeSalePrice" class="sapam-main-li-cen-li-input" type="text"
						placeholder="请输入售价" value="" />
				</view>
				<view class="sapam-main-li-cen-li">
					<view class="sapam-main-li-cen-li-left">
						<text class="sapam-main-li-cen-li-left-txt">库存数量</text>
						<text class="sapam-main-li-cen-li-left-txt1">:</text>

					</view>
					<input v-model="attributeStock" class="sapam-main-li-cen-li-input" type="text" placeholder="请输入库存数量"
						value="" />
				</view>
				<view class="sapam-main-li-cen-li">
					<view class="sapam-main-li-cen-li-left">
						<text class="sapam-main-li-cen-li-left-txt">规格描述</text>
						<text class="sapam-main-li-cen-li-left-txt1">:</text>
					</view>
					<input v-model="attributeRemarks" class="sapam-main-li-cen-li-input" type="text"
						placeholder="请输入规格描述" value="" />
				</view>
				<view class="sapam-main-li-cen-li">
					<view class="sapam-main-li-cen-li-left">
						<text class="sapam-main-li-cen-li-left-txt">包邮</text>
						<text class="sapam-main-li-cen-li-left-txt1">:</text>

					</view>
					<view class="sapam-main-li-cen-li-right">
						<switch class="sapam-main-li-cen-li-right-switch" :checked="changeChecked(isPost)"
							color="#28CD50" @change="switch2Change" />
					</view>
				</view>
			</view>
		</view>
		<view class="shopModelEdit-btn">
			<view v-if="btn_ok" class="shopModelEdit-btn-box font_blod" @click="cli_ok">
				确定修改
			</view>
			<view v-else class="shopModelEdit-btn-box shopModelEdit-btn-box-false font_blod" @click="cli_false">
				确定修改
			</view>

		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				id: '',
				attributeLogo: '',
				attributeName: '',
				attributeSalePrice: '',
				attributeStock: '',
				attributeRemarks: '',
				isPost: '',
			}
		},
		computed: {
			btn_ok() {
				let attributeLogo = this.attributeLogo
				let attributeName = this.attributeName
				let attributeSalePrice = this.attributeSalePrice
				let attributeStock = this.attributeStock
				let attributeRemarks = this.attributeRemarks
				if (attributeLogo &&
					attributeName &&
					attributeSalePrice &&
					attributeStock &&
					attributeRemarks
				) {
					return true
				} else {
					return false
				}
			},
			...mapState({
				imageSrc: state => state.image.src,
				imagePath: state => state.image.path
			})
		},
		onLoad(val) {
			this.id = val.id
			this.attributeLogo = val.attributeLogo
			this.attributeName = val.attributeName
			this.attributeSalePrice = val.attributeSalePrice
			this.attributeStock = val.attributeStock
			this.attributeRemarks = val.attributeRemarks
			this.isPost = val.isPost
		},
		onShow() {
			if (this.imagePath == 'shopModelEdit') {
				this.attributeLogo = this.imageSrc
			}
		},
		methods: {
			// 改变包邮状态
			changeChecked(val) {
				if (val == 1) {
					return true
				} else {
					return false
				}
			},
			// 是否包邮
			switch2Change(e) {
				console.log(e);
				let val = e.target.value
				if (val) {
					this.isPost = '1'
				} else {
					this.isPost = '0'
				}
			},
			cli_upimg() {
				let _that = this
				uni.chooseImage({
					count:1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.navigateTo({
							url: '/pages/cutImage/cutImage?src=' + tempFilePaths[0]
						})
						this.$store.commit('image/path/UPDATE', 'shopModelEdit')
					}
				});
				// uni.chooseImage({
				// 	success: (chooseImageRes) => {
				// 		const tempFilePaths = chooseImageRes.tempFilePaths;
				// 		uni.uploadFile({
				// 			url: allapi.upload, //仅为示例，非真实的接口地址
				// 			filePath: tempFilePaths[0],
				// 			name: 'file',
				// 			success: (uploadFileRes) => {
				// 				console.log(uploadFileRes.data);
				// 				let dat = uploadFileRes.data
				// 				let msg = JSON.parse(dat)
				// 				let imgurl = msg.url
				// 				console.log(msg);
				// 				_that.attributeLogo = imgurl
				// 			}
				// 		});
				// 	}
				// });
			},
			cli_closeimg() {
				this.attributeLogo = ''
			},
			cli_false() {
				uni.showToast({
					title: '请先完善信息',
					icon: 'none'
				})
			},
			cli_ok() {
				this.updateAttribute()
			},
			// 修改规格信息
			updateAttribute() {
				uni.request({
					url: allapi.updateAttribute,
					data: {
						id: this.id,
						attributeLogo: this.attributeLogo,
						attributeName: this.attributeName,
						attributeSalePrice: this.attributeSalePrice,
						attributeStock: this.attributeStock,
						attributeRemarks: this.attributeRemarks,
						isPost: this.isPost
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.sapam-main-list {
		display: flex;
	}

	.sapam-main-li {
		margin: 26rpx 24rpx;
		background: #FFFFFF;
		padding: 24rpx;
		border-radius: 16rpx;
		flex: 1;
	}

	.sapam-main-li-close {
		margin-top: 58rpx;
		margin-left: 32rpx;
	}

	.sapam-main-li-close-img {
		width: 48rpx;
		height: 48rpx;
	}

	.sapam-main-li-top-back {
		width: 100rpx;
		height: 100rpx;
		position: relative;
	}

	.sapam-img-close {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		right: -10rpx;
		top: -10rpx;
	}

	.sapam-main-li-top {
		display: flex;
	}

	.sapam-main-li-top-img {
		width: 100rpx;
		height: 100rpx;
	}

	.sapam-main-li-top-right {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 24rpx;
	}
	.sapam-main-li-top-right-inputBox {
		width: 100%;
		height: 64rpx;
		background: #f3f5f6;
		display: flex;
		align-items: center;
		border-radius: 12rpx;
	}
	.sapam-main-li-top-right-input {
		font-size: 28rpx;
		color: #999999;
		font-weight: 400;
	}

	.sapam-main-li-cen {
		margin-left: 124rpx;
	}

	.sapam-main-li-cen-li {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;

	}

	.sapam-main-li-cen-li:last-child {
		margin-bottom: 0;
	}

	.sapam-main-li-cen-li-left {
		width: 140rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
	}

	.sapam-main-li-cen-li-left-txt {
		width: 100rpx;
		text-align: justify;
		text-align-last: justify;
	}

	.sapam-main-li-cen-li-left-txt1 {
		margin-left: 5rpx;
	}

	.sapam-main-li-cen-li-left-txt2 {
		margin: 0 5rpx;
	}
	.sapam-main-li-cen-li-right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
	
	.sapam-main-li-cen-li-right-switch {
		scale: 0.5
	}
	.sapam-main-li-cen-li-input {
		width: 232rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #F3F5F6;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		padding: 0 10rpx;
		flex: 1;
	}

	.shopModelEdit-btn {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 40rpx;
		margin-top: 100rpx;
	}

	.shopModelEdit-btn-box {
		width: 100%;
		height: 92rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #28CD50;
		border-radius: 46rpx;
		color: #FFFFFF;
		font-size: 36rpx;
		letter-spacing: 1rpx;
	}

	.shopModelEdit-btn-box-false {
		opacity: 0.6;
	}
</style>
